<template>
  <div class="app-detail">
   <AppHeader back class="app-common__header" :title="proData?.proname">
   </AppHeader>
   <template v-if="proData">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="img in proData.banners" :key="img" style="width:100%">
        <img :src="img">
        </van-swipe-item>
      </van-swipe>
      <div class="app-detail__info">
        <van-space direction="vertical" fill>
        <h3>{{proData.proname}}</h3>
        <p>{{proData.desc}}</p>
      </van-space>
      </div>
      <van-submit-bar :disabled="!isLoggined" :price="proData.originprice*100" :button-text="isLoggined ? '加入购物车' : '登录后操作'" @submit="onSubmit" />
   </template>
  </div>
</template>
<script setup lang="ts">
import AppHeader from "../AppLayout/AppHeader/index.vue";
import {useRoute} from 'vue-router'
import {getProDetailApi} from '@/api/pro'
import {postAddCartItemApi} from '@/api/cart'
import {ref,onMounted} from 'vue'
import type {IProItem} from '@/@types/pro'
import useAuthorityStore from '@/stores/authority'
import { storeToRefs } from 'pinia'
const authStore = useAuthorityStore()
const {isLoggined,authorityInfo} = storeToRefs(authStore)
const route =useRoute()
const proData=ref<IProItem>()
const getProDetail=async ()=>{
  const data=await getProDetailApi(route.params.proid as string)
  proData.value=(data as unknown) as IProItem
}
const onSubmit = () => {
  try {
    postAddCartItemApi({
      userid: authorityInfo.value.userid,
      proid: route.params.proid as string,
      num: 1
    })
  } catch (error) {}
}
onMounted(() => {
  getProDetail()
})
</script>
<style lang="scss">
.app-common{
  &__header{
    background-color: rgb(243, 125, 15);
  }
  .my-swipe img{
    width: 100%;
  }
  &__info {
    padding: 15px;
  }

}
</style>